<template>
  <div class="app-container">
    <el-card>
      <el-form
        label-width="auto"
        :rules="formRules"
        ref="form"
        :model="form"
        size="small"
      >
        <el-form-item label="选择分类：" prop="category">
          <el-select
            style="width: 500px"
            v-model="form.category"
            placeholder="请选择"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="选择条件：" prop="conditions">
            <el-select
              style="width: 500px"
              v-model="form.conditions"
              placeholder="请选择"
              @change="getSecondaryQuestionList"
            >
              <el-option
                v-for="item in conditionsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="metaId"
            label-width="20px"
            v-if="
              form.conditionsType == 'OP_SCOPE' ||
              form.conditionsType == 'OP_EQUAL'
            "
          >
            <el-select
              @change="selectChild"
              style="width: 500px"
              v-model="form.metaId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in secondConditionsList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="条件描述：" prop="name">
          <el-input
            style="width: 500px"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="一般基本条件：" prop="threshold">
          <el-input
            style="width: 500px"
            :rows="3"
            type="textarea"
            maxlength="100"
            show-word-limit
            placeholder="请输入内容"
            v-model="form.threshold"
          ></el-input>
        </el-form-item>
        <el-form-item label="条件优势：" prop="advantage">
          <el-radio-group v-model="form.advantage">
            <el-radio :label="0">无</el-radio>
            <el-radio :label="1">有</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="form.advantage == 1">
          <el-form-item label="优势描述：" prop="advantageDesc">
            <el-input
              style="width: 500px"
              :rows="3"
              maxlength="100"
              placeholder="请输入内容"
              v-model="form.advantageDesc"
            ></el-input>
          </el-form-item>
          <el-form-item label="优势选项值：">
            <el-form-item
              v-if="
                form.conditionsType == 'OP_SCOPE' ||
                form.conditionsType == 'OP_EQUAL'
              "
            >
              <div
                v-for="(v, idx1) in form.advantageValue"
                :key="idx1"
                style="margin-top: 5px"
              >
                <span
                  ><el-input
                    size="mini"
                    :disabled="v.leftOp == 'NO'"
                    v-model="v.leftValue"
                    style="width: 100px"
                  ></el-input
                ></span>
                <span
                  ><el-select
                    size="mini"
                    :placeholder="``"
                    @change="changeGoodLeftOp($event, idx1)"
                    v-model="v.leftOp"
                    style="width: 60px"
                  >
                    <el-option
                      v-for="(it, i) in lsl6Op"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    ></el-option> </el-select
                ></span>
                <span style="margin: 0 10px; font-size: 14px">{{ v.un }}</span>
                <span
                  ><el-select
                    size="mini"
                    :placeholder="``"
                    v-model="v.rightOp"
                    @change="changeGoodRightOp($event, idx1)"
                    style="width: 60px"
                  >
                    <el-option
                      v-for="(it, i) in lsl6Op"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    ></el-option> </el-select
                ></span>

                <span
                  ><el-input
                    :disabled="v.rightOp == 'NO'"
                    size="mini"
                    v-model="v.rightValue"
                    style="width: 100px"
                  ></el-input
                ></span>
              </div>
            </el-form-item>
            <el-form-item
              v-if="
                form.conditionsType == 'ENUM' ||
                form.conditionsType == 'ENUM_MORE'
              "
            >
              <el-select
                multiple
                style="width: 500px"
                v-model="form.advantageValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in secondConditionsList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </div>

        <el-form-item label="条件劣势：" prop="recessive">
          <el-radio-group v-model="form.recessive">
            <el-radio :label="0">无</el-radio>
            <el-radio :label="1">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.recessive == 1">
          <el-form-item label="劣势描述：" prop="recessiveDesc">
            <el-input
              style="width: 500px"
              :rows="3"
              maxlength="100"
              placeholder="请输入内容"
              v-model="form.recessiveDesc"
            ></el-input>
          </el-form-item>
          <el-form-item label="劣势选项值：">
            <el-form-item
              v-if="
                form.conditionsType == 'OP_SCOPE' ||
                form.conditionsType == 'OP_EQUAL'
              "
            >
              <div
                v-for="(v, idx1) in form.recessiveValue"
                :key="idx1"
                style="margin-top: 5px"
              >
                <span
                  ><el-input
                    size="mini"
                    :disabled="v.leftOp == 'NO'"
                    v-model="v.leftValue"
                    style="width: 100px"
                  ></el-input
                ></span>
                <span
                  ><el-select
                    size="mini"
                    :placeholder="``"
                    @change="changeBadLeftOp($event, idx1)"
                    v-model="v.leftOp"
                    style="width: 60px"
                  >
                    <el-option
                      v-for="(it, i) in lsl6Op"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    ></el-option> </el-select
                ></span>
                <span style="margin: 0 10px; font-size: 14px">{{ v.un }}</span>
                <span
                  ><el-select
                    size="mini"
                    :placeholder="``"
                    v-model="v.rightOp"
                    @change="changeBadRightOp($event, idx1)"
                    style="width: 60px"
                  >
                    <el-option
                      v-for="(it, i) in lsl6Op"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    ></el-option> </el-select
                ></span>

                <span
                  ><el-input
                    :disabled="v.rightOp == 'NO'"
                    size="mini"
                    v-model="v.rightValue"
                    style="width: 100px"
                  ></el-input
                ></span>
              </div>
            </el-form-item>
            <el-form-item
              v-if="
                form.conditionsType == 'ENUM' ||
                form.conditionsType == 'ENUM_MORE'
              "
            >
              <el-select
                style="width: 500px"
                v-model="form.recessiveValue"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in secondConditionsList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
const form = {
  category: "",
  conditions: "",
  conditionsType: "",
  metaId: "",
  name: "",
  threshold: "",
  advantage: 0,
  advantageDesc: "",
  recessive: 0,
  recessiveDesc: "",
  advantageValue: null,
  recessiveValue: null,
};
import { getListSituationConditions } from "@/api/product";
import {
  addEnterprise,
  getEnterpriseDetail,
  editEnterprise,
} from "@/api/campanyData";
import { getDictData } from "@/utils/dict";
export default {
  data() {
    return {
      form: Object.assign({}, form),
      cateList: [],
      conditionsList: [],
      secondConditionsList: [],
      lsl6Op: [
        { label: "无", value: "NO" },
        { label: "=", value: "EQ" },
        { label: "<", value: "LT" },
        { label: "<=", value: "LE" },
      ],
      formRules: {
        category: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        conditions: [
          { required: true, message: "请选择条件", trigger: "change" },
        ],
        threshold: [
          { required: true, message: "请输入一般基本条件", trigger: "change" },
        ],
        metaId: [
          { required: true, message: "请选择子条件", trigger: "change" },
        ],
        name: [
          { required: true, message:"请输入条件描述", trigger: "blur" },
        ],
        advantageDesc: [
          { required: true, message: "请输入优势描述", trigger: "blur" },
        ],
        recessiveDesc: [
          { required: true, message: "请输入劣势描述", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    // this.getCateList();
  },
  async created() {
    await this.getConditionsList();
    this.cateList = await getDictData("enter_info_cate");
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑";
      await this.getInfo();
    }
  },
  methods: {
    getInfo() {
      getEnterpriseDetail(this.$route.query.id).then((res) => {
        const obj = this.conditionsList.find((v) => {
          return v.value == res.data.conditions;
        });
        console.log("obj", obj);
        this.secondConditionsList = obj.selectList;
        this.form.conditionsType = obj.valueType;
        res.data.advantageValue = JSON.parse(res.data.advantageValue);
        res.data.recessiveValue = JSON.parse(res.data.recessiveValue);
        this.form = Object.assign(this.form, res.data);
      });
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const obj = Object.assign({}, this.form);
          obj.advantageValue = JSON.stringify(obj.advantageValue);
          obj.recessiveValue = JSON.stringify(obj.recessiveValue);

          if (obj.id) {
            editEnterprise(obj).then((res) => {
              this.$message.success("修改成功");
            });
          } else {
            addEnterprise(obj).then((res) => {
              this.$message.success("添加成功");
            });
          }

          this.$router.back();
        }
      });
    },
    changeBadLeftOp(e, i) {
      if (e === "NO") {
        this.form.recessiveValue[i].leftValue = null;
      }
    },
    changeBadRightOp(e, i) {
      if (e === "NO") {
        this.form.recessiveValue[i].rightValue = null;
      }
    },
    changeGoodLeftOp(e, i) {
      if (e === "NO") {
        this.form.advantageValue[i].leftValue = null;
      }
    },
    changeGoodRightOp(e, i) {
      if (e === "NO") {
        this.form.advantageValue[i].rightValue = null;
      }
    },
    selectChild(e) {
      this.form.advantageValue = null;
      this.form.recessiveValue = null;
      let arr = this.secondConditionsList
        .find((item) => {
          return item.id === e;
        })
        .unknowns.split(",");
      const val = arr.map((v) => {
        return {
          leftOp: "",
          leftValue: "",
          rightOp: "",
          rightValue: "",
          un: v,
        };
      });
      this.form.advantageValue = JSON.parse(JSON.stringify(val));
      this.form.recessiveValue = JSON.parse(JSON.stringify(val));
    },
    getSecondaryQuestionList(e) {
      const obj = this.conditionsList.find((v) => {
        return v.value === e;
      });
      this.form.advantageValue = null
      this.form.recessiveValue = null,
      this.form.metaId = "";
      this.form.conditionsType = obj.valueType;
      this.secondConditionsList = obj.selectList;
    },
    getConditionsList() {
      getListSituationConditions().then((res) => {
        this.conditionsList = res.data.map((v) => {
          return {
            value: v.conditions,
            label: v.conditionsName,
            selectList: v.selectList,
            valueType: v.valueType,
          };
        });
      });
    },
  },
};
</script>

<style></style>
